<template>
    <div class="page-content">
        <!-- 顶部 -->
        <div class="header">
            <span class="header-text">{{ BaseInfo.name }}</span>
        </div>
        <!-- 内容 -->
        <div class="wrap">
            <!-- 左侧 -->
            <div class="left">
                <div class="left-header">
                    <div class="title" style="margin-top: 0.0625rem">
                        <!-- <i
                            class="el-icon-share"
                            style="margin-left: 0.1875rem"
                        ></i> -->
                        {{ pieTitle }}产出比例
                    </div>
                    <el-button
                        style="padding: 0.375rem 0.3125rem"
                        type="primary"
                        @click="switchYear()"
                        >查看{{ pieSwitchTitle }}</el-button
                    >
                    <out-pie
                        style="width: 100%; height: 18.75rem"
                        class="chart"
                        :chooseMouPie="chooseMouPie"
                        :allProductionTypeOfMoun="allProductionTypeOfMoun"
                        :allProductionTypeOfYear="allProductionTypeOfYear"
                    ></out-pie>
                </div>
                <div class="left-mid">
                    <div class="title" style="margin-top: 0.0625rem">
                        <!-- <i
                            class="el-icon-s-data"
                            style="margin-left: 0.1875rem"
                        ></i> -->
                        {{ lineTitle }}产出走势
                    </div>
                    <el-button
                        style="float: right; padding: 0.375rem 0.3125rem"
                        type="primary"
                        @click="switchLastYear()"
                        >查看{{ lineSwitchTitle }}</el-button
                    >
                    <outLine
                        class="chart"
                        style="width: 98%; height: 15.8rem"
                        :allProductionTypeLine="allProductionTypeLine"
                    ></outLine>
                </div>
            </div>
            <!-- 中间 -->
            <div class="center">
                <!-- 地图 -->
                <div class="center-map">
                    <breed-map style="width: 100%; height: 100%"></breed-map>
                </div>
                <!-- 离线清单 -->
                <div class="center-offline">
                    <div class="center-offline-header">
                        <p>
                            <i class="el-icon-s-order"></i>
                            <span>近日基地鸽棚出仓登记</span>
                        </p>
                    </div>
                    <div class="center-offline-mid">
                        <table class="tableData" ref="table">
                            <thead>
                                <tr>
                                    <th>日期</th>
                                    <th>鸽棚负责人</th>
                                    <th>仓号</th>
                                    <th>类型</th>
                                    <th>数量</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr
                                    v-for="(item, index) in tableData"
                                    :key="index"
                                >
                                    <td>{{ item.gmtCreate }}</td>
                                    <td>{{ item.dovecoteDirector }}</td>
                                    <td>{{ item.dovecoteNumber }}</td>
                                    <td>{{ item.type }}</td>
                                    <td>{{ item.total }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- 右侧 -->
            <div class="right">
                <div class="right-header">
                    <span class="right-title">基地信息</span>
                    <div class="right-top">
                        <div class="right-top-content">
                            <span class="name">
                                <i
                                    class="el-icon-user"
                                    style="font-size: 1.3rem; color: #218868"
                                ></i>
                                负责人:</span
                            >
                            <span class="text">{{
                                BaseInfo.principalName
                            }}</span>
                        </div>
                        <div class="right-top-content">
                            <span class="name">
                                <i
                                    class="el-icon-s-home"
                                    style="font-size: 1.3rem; color: #3f51b5"
                                ></i>
                                鸽棚数量:</span
                            >
                            <span class="text"
                                >{{ BaseInfo.numberOfDovecote }}座</span
                            >
                        </div>
                        <div class="right-top-content">
                            <span class="name">
                                <i
                                    class="el-icon-s-custom"
                                    style="font-size: 1.3rem; color: #03a9f4"
                                ></i>
                                饲养员:</span
                            >
                            <span class="text"
                                >{{ BaseInfo.numberOfBreeder }}位</span
                            >
                        </div>
                        <div class="right-top-content">
                            <span class="name">
                                <i
                                    class="el-icon-star-on"
                                    style="font-size: 1.3rem; color: #ffeb3b"
                                ></i>
                                绩效冠军:</span
                            >
                            <span class="text">{{
                                BaseInfo.theBestDovecote
                            }}</span>
                        </div>
                        <div class="right-top-content">
                            <span class="name">
                                <i
                                    class="el-icon-location-information"
                                    style="font-size: 1.3rem; color: #ee5c42"
                                ></i>
                                地址:</span
                            >
                            <span class="text">{{
                                BaseInfo.province +
                                BaseInfo.city +
                                BaseInfo.detailedAddress
                            }}</span>
                        </div>
                    </div>
                </div>
                <div class="right-mid">
                    <div class="right-mid-header">
                        <i
                            class="el-icon-s-comment"
                            style="font-size: 1.125rem"
                        ></i>
                        <span>近日基地鸽棚入库通知</span>
                    </div>
                    <div class="right-content">
                        <ul>
                            <li
                                style="padding-right: 1.25rem; color: #dbdbdb;"
                                class="messageList"
                                v-for="(item, index) in message_List"
                                :key="index"
                            >
                                <i
                                    style="
                                        margin-right: 1.25rem;
                                        width: 33.3%;
                                        text-align: center;
                                        color: #a3a3a3;
                                    "
                                    >{{ item.gmtCreate.split(" ")[0] }}</i
                                >
                                <i
                                    style="
                                        margin-right: 0.5rem;
                                        width: 33.3%;
                                        text-align: center;
                                        letter-spacing: 0.09375rem;
                                    "
                                    >{{ item.type }}入库</i
                                >
                                <i class="opt">
                                    <el-button
                                        type="text"
                                        style="font-size: 0.75rem width: 33.3%;"
                                        @click="getMessage(item)"
                                        >查看</el-button
                                    >
                                </i>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 弹框 ——start -->
        <DetailInfo
            :detailDialog="detailDialog"
            :detailInfo="detailInfo"
            @closeAddDialog="closeAddDialog"
            v-show="detailDialog"
        />
        <!-- 弹框 ——end -->
    </div>
</template>

<script>
import {
    getAllTypeAmountOfMonth,
    getAllTypeAmountOfYear,
    getBillByBaseId,
    findBillByGmt_createAndBaseId,
} from "../../../../api/Basic/InfoShow/BreedShow";
import DetailInfo from "../../../../components/Basic/dataInfo.vue";
import { mapMutations, mapState } from "vuex";
import outPie from "@/components/Basic/outPie.vue";
import outLine from "@/components/Basic/outLine.vue";
import breedMap from "@/components/Basic/breedMap.vue";
import BreedMap from "../../../../components/Basic/breedMap.vue";
export default {
    name: "BreedShow",
    meta: {
        title: "养殖展板",
    },
    created() {
        let d = new Date();
        this.year = d.getFullYear();
        // console.log("基地", this.BaseInfo.id);
        if (this.BaseInfo.id) {
            this.getAllProductionType();
            this.getAllProductionTypeLine();
            this.getBillDataByBaseId();
            this.getfindBill();
        }
    },
    mounted() {
        this.getMoreData(); //监听出仓表格滚动事件
    },
    components: {
        outPie,
        outLine,
        DetailInfo,
        breedMap,
        BreedMap,
    },
    computed: {
        ...mapState({
            BaseInfo: (state) => state.Usersetting.BaseInfo,
        }),
    },
    data() {
        return {
            msg: "基础信息展板",
            value: "1",
            year: "", //年份
            getAllProductionTypeOfMounParams: {
                //获得基地月各种产出类型数量参数
                baseId: "",
                pageNum: 1,
                pageSize: 12,
                year: "",
            },
            getAllTypeAmountOfYearParams: {
                //获得基地年各种产出类型数量参数
                baseId: "",
                year: "",
            },
            getAllProductionTypeLineParams: {
                //获取基地出库走势参数
                baseId: "",
                pageNum: 1,
                pageSize: 12,
                year: "",
            },
            allProductionTypeOfMoun: {}, //上个月的产出数据
            allProductionTypeOfYear: {}, //获取上一年的产出数据
            isThisYear: false, //是否查看本年数据
            isLastYear: false, //是否是去年的数据
            pieTitle: "上个月", //圆环标题
            pieSwitchTitle: "本年", //切换
            chooseMouPie: true, //选择月的饼状图
            lineTitle: "本年", //曲线标题
            lineSwitchTitle: "上一年", //切换
            allProductionTypeLine: [], //年出库走势
            getBillByBaseIdParams: {
                //基地鸽棚出仓登记参数
                baseId: "",
                pageNum: 1,
                pageSize: 7,
            },
            dom: "", //表格元素
            dialogVisible: false,
            tableData: [], //出仓数据
            tableTotal: "", //表格总数
            message_List: [], //列表
            detailDialog: false, //是否打开弹框
            detailInfo: {}, //弹框信息
        };
    },
    methods: {
        ...mapMutations(["showBaseChoice"]),

        //获得每月基地各种产出类型数量
        async getAllProductionType() {
            let d = new Date();
            let year = d.getFullYear();
            let mounth = d.getMonth() + 1;
            if (mounth === 1) {
                //若是1月的则要查看去年12月的数据
                year--;
                mounth = 12;
            }

            this.getAllProductionTypeOfMounParams.baseId = this.BaseInfo.id; //设置获得基地各种产出类型数量参数的baseid
            this.getAllProductionTypeOfMounParams.year = year; //设置获得基地各种产出类型数量参数的year

            let { data } = await getAllTypeAmountOfMonth(
                this.getAllProductionTypeOfMounParams
            );
            // console.log(data,'数据');
            // console.log(mounth,'月份')
            if (mounth === 1) {
                
                //此时在上面已经减去了
                this.allProductionTypeOfMoun = data.data.records[mounth - 1];
            } else {
                this.allProductionTypeOfMoun = data.data.records[mounth - 2];
            }
            this.chooseMouPie = true;
        },

        //切换牛/月数据
        async switchYear() {
            this.isThisYear = !this.isThisYear;
            if (this.isThisYear) {
                this.pieTitle = "本年";
                this.pieSwitchTitle = "上个月";
                this.getAllTypeAmountOfYearParams.baseId = this.BaseInfo.id;
                this.getAllTypeAmountOfYearParams.year = this.year;
                // console.log(this.year,'今年')
                let { data } = await getAllTypeAmountOfYear(
                    this.getAllTypeAmountOfYearParams
                );
                // console.log(data,this.year)
                if (data.statusCode === 20000) {
                    this.allProductionTypeOfYear = data.data;
                    this.chooseMouPie = false;
                }
            } else {
                this.pieTitle = "上个月";
                this.pieSwitchTitle = "本年";
                this.getAllProductionType();
            }
        },

        //获取基地出库走势
        async getAllProductionTypeLine() {
            this.getAllProductionTypeLineParams.baseId = this.BaseInfo.id;
            this.getAllProductionTypeLineParams.year = this.year; //本年的数据

            if (this.isLastYear) {
                this.getAllProductionTypeLineParams.year--;
            }

            let { data } = await getAllTypeAmountOfMonth(
                this.getAllProductionTypeLineParams
            );
            if (data.statusCode === 20000) {
                this.allProductionTypeLine = data.data.records;
            } else {
                return;
            }
        },

        //切换上一年基地出库走势
        async switchLastYear() {
            this.isLastYear = !this.isLastYear;
            if (this.isLastYear) {
                this.lineTitle = "上一年";
                this.lineSwitchTitle = "本年";
                this.getAllProductionTypeLineParams.year--;
                let { data } = await getAllTypeAmountOfMonth(
                    this.getAllProductionTypeLineParams
                );
                // console.log("走势", data);
                if (data.statusCode === 20000) {
                    this.allProductionTypeLine = data.data.records;
                } else {
                    return;
                }
            } else {
                this.lineTitle = "本年";
                this.lineSwitchTitle = "上一年";
                this.getAllProductionTypeLineParams.year = this.year;
                this.getAllProductionTypeLine(
                    this.getAllProductionTypeLineParams
                );
            }
        },

        //获取基地鸽棚出仓登记记录
        async getBillDataByBaseId() {
            // console.log("我在获取基地鸽棚出仓登记记录");
            this.getBillByBaseIdParams.baseId = this.BaseInfo.id;
            let { data } = await getBillByBaseId(this.getBillByBaseIdParams);
            // console.log("数据", data);
            if (data.statusCode === 20000) {
                let dataTemp = data.data.records;
                // console.log("数据", dataTemp);
                dataTemp.forEach((item, index) => {
                    item.gmtCreate = item.gmtCreate.split(" ")[0];
                });
                this.tableData = dataTemp;
                this.tableTotal = data.data.total;
            }
            // console.log("出仓登记记录", data);
            // console.log("end");
        },

        //获取更多数据
        async getMoreData() {
            // 获取需要绑定的table
            this.dom = this.$refs.table.bodyWrapper;
            // this.dom.addEventListener("scroll", async () => {
            //     console.log("监听滚动事件");
            //     // 滚动距离
            //     let scrollTop = this.dom.scrollTop;
            //     //表格高度
            //     let offsetHeight = this.dom.offsetHeight;
            //     //滚动条实际高度
            //     let scrollHeight =
            //         this.dom.scrollHeight || this.dom.scrollHeight;

            //     if (scrollHeight - (scrollTop + offsetHeight) <= 2) {
            //         console.log("触底了");
            //         let total =
            //             this.getBillByBaseIdParams.pageNum *
            //             this.getBillByBaseIdParams.pageSize;

            //         if (this.tableTotal > total) {
            //             this.getBillByBaseIdParams.pageNum++;

            //             let { data } = await getBillByBaseId(
            //                 this.getBillByBaseIdParams
            //             );

            //             if (data.statusCode === 20000) {
            //                 let dataTemp = data.data.records;

            //                 dataTemp.forEach((item, index) => {
            //                     item.gmtCreate = item.gmtCreate.split(" ")[0];
            //                 });
            //                 this.tableData = dataTemp;
            //                 this.tableData.push(...dataTemp);
            //             } else {
            //                 return;
            //             }
            //         }
            //     }
            // });
        },

        //获取入库登记记录
        async getfindBill() {
            // console.log("我在获取入仓数据");
            let d = new Date();
            // console.log(d);
            let endYear = d.getFullYear();
            let endMonth = d.getMonth() + 1;
            let endDay = d.getDate();
            let startYear = endYear;
            let startMonth = endMonth;
            let startDay = endDay - 27;
            if (startDay <= 0) {
                if (endMonth == 3) {
                    if (year % 4 == 0) {
                        endDay = 29 + startDay;
                    } else {
                        endDay = 28 + startDay;
                    }
                } else if (
                    endMonth == 1 ||
                    endMonth == 5 ||
                    endMonth == 7 ||
                    endMonth == 8 ||
                    endMonth == 10 ||
                    endMonth == 12
                ) {
                    startDay = 30 + startDay;
                } else {
                    startDay = 31 + startDay;
                }
                startMonth--;
            }
            if (startMonth <= 0) {
                startYear--;
                startMonth = 12;
            }

            //数据处理
            startMonth = startMonth < 10 ? "0" + startMonth : startMonth;
            startDay = startDay < 10 ? "0" + startDay : startDay;
            endMonth = endMonth < 10 ? "0" + endMonth : endMonth;
            endDay = endDay < 10 ? "0" + endDay + 1 : endDay + 1;
            let startDate = startYear + "-" + startMonth + "-" + startDay;
            let endDate = endYear + "-" + endMonth + "-" + endDay;
            // console.log(startDate);
            // console.log(endDate)
            let { data } = await findBillByGmt_createAndBaseId(
                startDate,
                endDate,
                this.BaseInfo.id
            );
            // console.log("数据", data);
            this.message_List = data.data;
            // console.log(this.message_List);
            // console.log("end");
        },

        //获取入库详情
        getMessage(row) {
            // console.log("查看");
            // console.log(row);
            this.detailInfo = row;
            this.detailDialog = true;
            // console.log(row);
        },

        //关闭弹框
        closeAddDialog(a) {
            this.detailDialog = a;
        },
    },
};
</script>

<style lang="scss" scoped>
/*常用公共样式*/
.fl {
    float: left;
    display: inline;
}
.fr {
    float: right;
    display: inline;
}
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
html {
    overflow-x: hidden;
}
.page-content {
    position: relative !important;
    background-color: #15213d !important;
    box-sizing: border-box;
    padding-top: 0 !important;
}
.header {
    background: url(../../../../assets/image/header.png) no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 5rem;
    margin-bottom: 0.9375rem;
    // margin-left: -3.737374rem;
    text-align: center;
    // padding-right: .176768rem;
    box-sizing: border-box;
}

.header-text {
    font-size: 1.2rem;
    display: block;
    color: #fff;
    letter-spacing: 0.020202rem;
    line-height: 3.75rem;
    font-weight: 600;
}

/* header */
.model-header {
    width: 100%;
    height: 0.353535rem;
    background: url("../../../../assets/image/header3.png") no-repeat;
    background-size: cover;
    text-align: center;
    line-height: 0.353535rem;
    color: #fff;
    font-size: 0.121212rem;
    letter-spacing: 2px;
    font-weight: 600;
}

.line {
    margin-right: 0.363636rem;
}
.line span {
    font-size: 0.10101rem;
    color: #3fccf7;
    font-weight: 600;
}

/* left neirong */
.wrap {
    height: 100%;
    width: 100%;
    display: flex;
}

.left {
    margin-right: 0.126263rem;
    width: 30%;
    box-sizing: border-box;
}

.left-mid,
.left-bottom,
.left-header {
    background: url("../../../../assets/image/kuang4.png") no-repeat;
    width: 100%;
    height: 25rem;
    position: relative;
    background-size: 100% 100%;
    margin-bottom: 1rem;
}

.left-bottom span,
.left-mid .title,
.left-header .title {
    // display: inline-block;
    color: #2b8fff;
    font-size: 1rem;
    font-weight: 600;
    padding-top: 0.315rem;
    padding-left: 0.375rem;
    box-sizing: border-box;
}
.left-header .el-button,
.left-mid .el-button {
    position: absolute;
    right: 10px;
    top: 38px;
    cursor: pointer;
}
.left-header .chart,
.left-mid .chart {
    position: absolute;
    top: 65px;
}

/* mid neirong */
.center {
    width: 39%;
    padding: 1.125rem;
    padding-top: 0;
    box-sizing: border-box;
    .center-map {
        width: 100%;
        height: 30rem;
        border: 1px solid #43dcff;
        margin-bottom: 0.10101rem;
        padding: 0.10101rem;
        box-sizing: border-box;
    }
    .center-offline {
        width: 100%;
        margin-top: 10px;

        .center-offline-header {
            width: 100%;
            height: 4rem;
            background: url("../../../../assets/image/kuang3.png") no-repeat
                center center;
            background-size: cover;
            text-align: center;
            p {
                font-size: 18px;
                color: #fff;
                line-height: 4rem;
                letter-spacing: 0.020202rem;
            }
        }
        .center-offline-mid {
            position: relative;
            width: 100%;
            height: 200px;
            box-sizing: border-box;
            overflow-y: auto;
            background-color: rgba(15, 52, 129, 0.3);
            .tableData {
                position: relative;
                width: 100%;
                line-height: 3rem;
                // thead{

                // }
                thead tr {
                    color: #00ffff;
                    font-size: 14px;
                }
                tbody tr {
                    color: #fff;
                    font-size: 11px;
                }
                thead tr th,
                tbody tr td {
                    width: 20%;
                }
            }
        }
    }
}

.center-offline-header .sit {
    text-align: center;
    width: 25%;
}

.sit-title {
    font-size: 2rem;
    color: #52d2ff;
}
.list {
    height: 10rem;
    overflow: hidden;
}
.list-item {
    height: 0.176768rem;
}
.sit-item {
    font-size: 0.090909rem;
    color: #fff;
    width: 25%;
    text-align: center;
}
.center-offline-bottom {
    width: 4.277778rem;
    height: 0.232323rem;
    background-color: #04153b;
    text-align: center;
}

.center-offline-bottom p {
    color: #fff;
    line-height: 0.232323rem;
}

/* right neirong */
.right {
    width: 28%;
    height: 100%;
}
.right-header {
    background: url("../../../../assets/image/kuang4.png") no-repeat;
    width: 100%;
    height: 20rem;
    position: relative;
    background-size: 100% 100%;
    margin-bottom: 1rem;
}
.right .right-title {
    display: inline-block;
    box-sizing: border-box;
    color: #2b8fff;
    font-size: 1.3rem;
    font-weight: 600;
    padding-top: 0.5rem;
    padding-left: 1rem;
    letter-spacing: 0.1rem;
}

.right-top {
    padding-left: 1rem;
    box-sizing: border-box;
}

.right-top-content {
    margin-top: 1.5rem;
}

.right-top:nth-last-child(1) {
    margin-top: none;
}

.right-top-content .name {
    font-size: 1.1rem;
    color: #52d2ff;
    margin-right: 0.050505rem;
    letter-spacing: 0.05rem;
    box-sizing: border-box;
}

.right-top-content .text {
    font-size: 1rem;
    color: #fff;
    letter-spacing: 0.1rem;
}

.right-mid,
.center-offline {
    margin-top: 0.10101rem;
    ::-webkit-scrollbar {
        width: 10px !important;
        border-radius: 0.050505rem;
    }
    ::-webkit-scrollbar-track-piece {
        background-color: rgba(13, 42, 121, 0.75) !important;
    }
    .right-content::-webkit-scrollbar-thumb {
        background-color: #274cb1 !important;
        border-radius: 0.050505rem;
        width: 0.070707rem;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #274cb1 !important;
    }

    ::-webkit-scrollbar-thumb:active {
        border: 0;
        border-radius: 0;
        background-color: #274cb1 !important;
    }

    .right-content {
        height: 320px;
        overflow-y: auto;
        background-color: rgba(15, 52, 129, 0.3);
        .messageList {
            position: relative;
            display: flex;
            align-items: center;
            height: 1.875rem;
            margin-bottom: 0.3125rem;
            padding-right: 0px;
            padding: 8px 0px 8px 0px ;
            border-bottom: 0.0625rem solid #6e747a;
            // line-height: 5rem;
            .opt {
                position: absolute;
                right: 2.5rem;
            }
        }
    }
}

.right-mid-header {
    background: url("../../../../assets/image/jianbian.png") no-repeat;
    background-size: 100% 100%;
    margin-top: 2rem;
    margin-bottom: 0.2rem;
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    color: #00ffff;
    font-size: 1rem;
    padding-left: 1rem;
    box-sizing: border-box;
    font-weight: 500;
}

.right-mid-scroll {
    padding-left: 0.10101rem;
    margin-top: 0.10101rem;
    height: 10rem;
    width: 90%;
    box-sizing: border-box;
    overflow-y: scroll;
}

.right-mid-content {
    width: 100%;
    height: 2.020202rem;
}

.right-bottom-content {
    width: 2.186869rem;
    height: 1.363636rem;
    margin: 0.040505rem 0.10101rem 0.030303rem 0.10101rem;
    padding: 0.020202rem 0.050505rem;
    box-sizing: border-box;
    border: 1px solid #43dcff;
    overflow: hidden;
}

.right-bottom-content img {
    width: 100%;
    height: 98%;
}

/*  lishijilu*/
.history {
    display: block;
    margin-top: 0.030303rem;
    width: 100%;
    font-size: 0.070707rem;
    color: #4b7ae2;
    text-align: center;
    margin-bottom: 0.050505rem;
}

.history-pic {
    display: block;
    width: 100%;
    font-size: 0.070707rem;
    color: #4b7ae2;
    text-align: center;
}

/* 去除水印 */
.anchorBL {
    display: none;
}
</style>